<template>
        <div :id="id" :datalist="datalist"  :color="color"></div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        props: ['id','datalist','color'],
        data() {
            return {
                //datalist:''
            }
        },
     
        mounted () {
            this.drawShape(this.id, this.datalist, this.color)
        },
        //  watch: {
        //     datalist(val){
        //         this.datalist = val;
        //     },
        // },

        methods:{
                drawShape(id,datalist,color){
                let self = this
                self.chartColumn = echarts.init(document.getElementById(id));
                let options = {
                    series: [
                    {
                        name:'及格率',
                        type:'pie',
                        radius: ['40%', '70%'],  //控制圆弧的宽窄
                        //center : ['20%', '45%'], // 两个圆的间距
                        avoidLabelOverlap: false,
                        hoverAnimation: false,  //鼠标经过的动画
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false   //隐藏标示文字
                                },
                                labelLine : {
                                    show : false   //隐藏标示线
                                }
                            }
                        },
                        data:[
                            {
                                value: (100-datalist),
                                name:''+(100-datalist)+'%', 
                                itemStyle: {
                                    color: color //突出的颜色
                                }
                            },
                            {
                                value: datalist,
                                label: {
                                    show: true,
                                    position: 'center',
                                    color: '#13c2c2',
                                    fontSize: 20,
                                    textStyle: {
                                        baseline : 'bottom'
                                    },
                                },
                                itemStyle: {
                                    color: '#ebeae6'
                                },
                                emphasis:{
                                    itemStyle: {
                                        color: '#ebeae6'
                                    }
                                },
                            }
                        ]
                    },
                ]
                 } 
              this.chartColumn.setOption(options) 
             }
          }
        
    }
</script>

<style scoped>

</style>